<template>
  <span class="messages">
    <transition-group name="flip" tag="div" class="message-group">
      <div v-for="message in messages" :key="message.key" :class="'ds-box-' + message.type" class="message ds-shadow1">
        <span :class="'ds-text-' + message.type" class="ds-text3">
          <fai v-if="message.type == 'info'" icon="info-circle"></fai>
          <fai v-if="message.type == 'success'" icon="check-circle"></fai>
          <fai v-if="message.type == 'warning'" icon="exclamation-circle"></fai>
          <fai v-if="message.type == 'danger'" icon="times-circle"></fai>
        </span>
        <span :class="'ds-text-' + message.type" class="ds-text3">{{ message.text }}</span>
        <span :class="'ds-text-' + message.type" class="ds-text4">{{ message.time }}</span>
      </div>
    </transition-group>
  </span>
</template>

<script>
import Vue from 'vue'

export default {
  data() {
    return {
      count: 0,
      messages: {},
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
  },
  show: function (text, type) {
    if (!this.instance) {
      let component = Vue.extend(this)
      this.instance = new component()
      this.instance.$mount()
      document.body.appendChild(this.instance.$el)
    }
    const msg = {
      key: 'm' + this.instance.count++,
      time: "测试的时间",
      type: type,
      text: text,
    }
    Vue.set(this.instance.messages, msg.key, msg)
    setTimeout(() => {
      Vue.delete(this.instance.messages, msg.key)
    }, 5000)
  },
  info: function (text) {
    this.show(text, 'info')
  },
  success: function (text) {
    this.show(text, 'success')
  },
  warning: function (text) {
    this.show(text, 'warning')
  },
  danger: function (text) {
    this.show(text, 'danger')
  },
}
</script>

<style scoped>
.messages {
  top: 8rem;
  left: 50%;
  position: fixed;
  transform: translate(-50%, 0);
}
.message-group {
  position: relative;
}
.message {
  position: relative;
  margin: 1rem;
}
.flip-move {
  transition: all 1s;
}
.flip-enter {
  opacity: 0;
}
.flip-enter-to {
  opacity: 1;
  transition: all 1s;
}
.flip-leave-to {
  opacity: 0;
  transition: all 1s;
}
.flip-move {
  transition: all 1s;
}
/* enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+) */
</style>
